Image maps are an important feature of the point-and-click interface which makes the World Wide Web so popular. The most common use of image maps is to allow users to access different documents by clicking on different areas in an image.
There are several limitations of the current image map implementation as it applies to this use. First, it only works over the HTTP protocol, making it unusable for reading local files or files accessed via alternate protocols. Second, a server transaction is required merely to determine where the link is directed. This can degrade performance noticeably when accessing distant sites. Third, unlike for normal links, there is no way for a browser to provide visual feedback to the user showing where a portion of an image map leads before the user actually clicks on it. Lastly, the implementation of image maps is server-dependent, compromising portability of documents.
While HTML+[3] contains provisions for "hypertext buttons" on images via
use of the FIG element, this method is an unworkable short-term
solution for several reasons. First, complete support of the FIG
element requires significant additional processing by the browser. Second,
it cannot degrade gracefully on browsers that do not support it. Third, it
requires the map description to be specified when the image appears, which
is inappropriate for some applications. The extension to support client-side
image maps addresses these issues.
SYNTAX
Adding a USEMAP attribute to an
IMG element indicates that it is a client-side image map. The
USEMAP attribute can be used with the ISMAP attribute
to indicate that the the image can be processed as either a client-side or
server-side image map. The argument to USEMAP specifies which
map to use with the image, in a format similar to the HREF attribute
on anchors. If the argument to USEMAP starts with a '#', it
is assumed to be in the same document as the IMG tag. A few
examples would be:
You can only click here if your browser supports client-side image
maps: <IMG SRC="../images/tech/pic1.gif"
USEMAP="maps.html#map1">
This image map will work regardless: <A HREF="/cgi-bin/image map/pic2"> <IMG SRC="../images/tech/pic2.gif" USEMAP="maps.html#map2" ISMAP></A>
Clicking here will take you to a page with an error message if you don't have client-side image map support: <A HREF="no_csim.html"> <IMG SRC="../images/tech/pic3.gif" USEMAP="maps.html#map3"> </A>
The different regions of the image are described using a MAP
element. The map describes each region in the image and indicates where it
links to. The basic format for the MAP element is as follows:
<MAP NAME="name">shape
<AREA
[SHAPE=""]
COORDS="x,y,..."
[HREF="reference"] [NOHREF]>
</MAP>
The name specifies the name of the map so that it can be referenced
by an IMG element. The shape gives the shape of this
area. Currently the only shape defined is "RECT", but the syntax
is defined in such a way to allow other region types to be added. If the
SHAPE tag is omitted, SHAPE="RECT" is assumed.
The COORDS tag gives the coordinates of the shape, using image
pixels as the units. For a rectangle, the coordinates are given as
"left,top,right,bottom". The rectangular region defined includes
the lower-right corner specified, i.e. to specify the the entire area of
a 100x100 image, the coordinates would be "0,0,99,99".
The NOHREF tag indicates that clicks in this region should
perform no action. An HREF tag specifies where a click in that
area should lead. Note that a relative anchor specification will be expanded
using the URL of the map description as a base, rather than using the URL
of the document from which the map description is referenced. If a
BASE tag is present in the document containing the map description,
that URL will be used as the base.
An arbitrary number of AREA tags may be specified. If two
areas intersect, the one which appears first in the map definition takes
precedence in the overlapping region. For example, a button bar in a document
might use a 160 pixel by 60 pixel image and appear like this:
<MAP NAME="buttonbar"><AREA SHAPE="RECT" COORDS="10,10,49,49" HREF="about_us.html">
<AREA SHAPE="RECT" COORDS="60,10,99,49" HREF="products.html">
<AREA SHAPE="RECT" COORDS="110,10,149,49" HREF="index.html">
<AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF>
</MAP>
<IMG SRC="../images/tech/bar.gif" USEMAP="#buttonbar">
This example includes a region encompassing the entire image with a NOHREF tag, but this is actually redundant. Any region of the image that is not defined by an AREA tag is assumed to be NOHREF.